<template>
  <md-nav-bar title="我的互动" />
  <view class="container">
    <view class="operation">
      <view class="uni-padding-wrap">
        <uni-segmented-control
          :current="data.current"
          :values="data.items"
          style-type="text"
          :active-color="data.configInfo?.select_color_text || '#1CA4C0'"
          @clickItem="onClickItem" />
      </view>
      <view class="search flex-c">
        <uni-search-bar
          class="uni-mt-10 search-bar"
          radius="40"
          placeholder="请输入文章标题"
          clearButton="auto"
          cancelButton="none"
          v-model="data.value"
          @confirm="handleSearch" />
          <image class="search-icon" :src="data.configInfo?.search_icon" @click="handleSearch" />
      </view>
    </view>
    <view class="content">
      <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :safearea="true" bottom="80px">
        <custom-waterfalls-flow
          ref="waterfallsFlowRef"
          :value="data.list"
          imageKey="imgs"
          @wapperClick="handleDetail"
          @imageClick="handleDetail">
          <!-- #ifdef MP-WEIXIN -->
          <view class="flow-item" v-for="(item, index) in data.list" :key="index" slot="slot{{index}}">
            <view class="desc ellipsis-2">{{ item.title }}</view>
            <view class="flex-b m-top-30">
              <view class="flex-l">
                <image :src="item.avatar" class="head" />
                <view class="m-left-8">{{ item.nickname }}</view>
              </view>
              <view class="flex-l" @click.stop="() => handleCollect(item)">
                <md-dianzan
                  :item="item"
                  :type="data.current == 0 ? 'dianzan' : 'collect'"
                  :collectKey="data.current == 0 ? 'is_agree' : 'is_collect'" />
              </view>
            </view>
          </view>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <template v-slot:default="item">
            <view class="flow-item">
              <view class="desc ellipsis-2">{{ item.title }}</view>
              <view class="flex-b m-top-30">
                <view class="flex-l">
                  <image :src="item.avatar" class="head" />
                  <view>{{ item.nickname }}</view>
                </view>
                <view class="flex-l" @click.stop="() => handleCollect(item)">
                  <md-dianzan
                    :item="item"
                    :type="data.current == 0 ? 'dianzan' : 'collect'"
                    :collectKey="data.current == 0 ? 'is_agree' : 'is_collect'" />
                </view>
              </view>
            </view>
          </template>
          <!-- #endif -->
        </custom-waterfalls-flow>
      </mescroll-body>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onPageScroll, onReachBottom, onShow, onLoad } from '@dcloudio/uni-app';
// 组件
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
// 接口
import { interactionCollect, interactionHall, interactionIndex, myInteraction } from '@/api';
// 类型
import type { Interaction } from '@/api/data';
// 工具
import { Toast } from '@/utils/util';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const data = reactive<any>({
  list: [],
  items: ['我的点赞', '我的收藏'],
  current: 0,
  value: '',
  onPageScroll,
  onReachBottom,
  canReset: false,
  configInfo: {}
});
const waterfallsFlowRef = ref(null);

// 收藏 | 点赞
const handleCollect = async (item: Interaction.Index.Data) => {
  // 1收藏 2点赞
  let collect_type = data.current === 0 ? 2 : 1;
  try {
    const res = await interactionCollect({ id: item.id, collect_type });
    Toast(res.msg);
    handleSearch();
  } catch (error) {}
};

// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = async (mescroll: any) => {
  try {
    let res = await myInteraction({
      page: mescroll.num,
      limit: mescroll.size,
      collect_type: data.current === 0 ? 2 : 1,
      title: data.value,
    });
    const curPageData = res?.data?.data?.map(item => ({ ...item, is_collect: true, is_agree: true })) || []; // 当前页数据
    if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
    data.list = data.list.concat(curPageData); //追加新数据
    // 瀑布流需要手动刷新数据
    waterfallsFlowRef.value!.refresh();
    mescroll.endByPage(curPageData.length, res?.data?.total);
  } catch (e) {
    //TODO handle the exception
    mescroll.endErr(); // 请求失败, 结束加载
  }
};

// 大tab点击回调
function onClickItem(e: { currentIndex: number }) {
  if (data.current !== e.currentIndex) {
    data.current = e.currentIndex;
    handleSearch();
    data.value = '';
  }
}

// 搜索
function handleSearch() {
  // 回到顶部
  getMescroll()?.scrollTo(0, 0);
  // page重置1请求列表
  getMescroll()?.resetUpScroll();
}

// 跳转互动详情
const handleDetail = (item: any) => {
  const { id } = item;
  uni.navigateTo({
    url: '/pages/interact/i-detail?id=' + id,
  });
};

onLoad(() => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
});

onShow(() => {
  data.canReset && getMescroll().resetUpScroll(); // 重置列表数据为第一页
  data.canReset && getMescroll().scrollTo(0, 0); // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
  data.canReset = true; // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
});
</script>
<style lang="scss" scoped>
.container {
  .operation {
    position: sticky;
    top: calc($safe-top + 44px);
    z-index: 10;
    background: white;
  }
  .uni-padding-wrap {
    padding-bottom: 20rpx;
  }
  background: white;
  .content {
    background: $backColor;
    padding: 20rpx 30rpx 0 30rpx;
    .flow-item {
      padding: 8rpx;
      .head {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: $primary;
      }
    }
  }
  .search {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    .search-bar {
      flex: 1;
    }
  }
  .search-icon {
    width: 88rpx;
    height: 65rpx;
    cursor: pointer;
  }

  .tab-btn {
    padding: 0 30rpx 20rpx;
    box-sizing: border-box;
    &-item {
      &:not(:last-of-type) {
        margin-right: 20rpx;
      }
      width: 140rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 25rpx;
      background: #efefef;
      color: $title;
      text-align: center;
      &.active {
        background: #1ca4c0;
        color: white;
      }
    }
  }

  // 分页列表
  .pagelist {
    background: $backColor;
    .card {
      &:not(:last-of-type) {
        margin-bottom: 20rpx;
      }
      background: white;
      padding: 35rpx 30rpx 20rpx;
      position: relative;
      .hot-icon.position {
        top: -30rpx;
        left: -16rpx;
      }
      .image {
        position: relative;
        width: 690rpx;
        height: 320rpx;
        border-radius: 0rpx 0rpx 20rpx 20rpx;
        overflow: hidden;
        .mask {
          width: 100%;
          height: 60rpx;
          position: absolute;
          bottom: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.5);
          &-date {
            font-size: $fs-28;
            color: #ffffff;
            line-height: 60rpx;
            padding: 0 32rpx;
          }
        }
      }
      .text {
        font-size: $fs-34;
        color: $title;
        font-weight: bold;
      }
      .date {
        text-align: right;
        color: $sub;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .clock {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }

  .publish-team {
    position: fixed;
    right: 16rpx;
    bottom: calc(80px + $safe-bottom + 80px);
  }
}
</style>
